<template>
  <div class="Advertising">
    <div class="chitising">
      <div class="aiuyert">
        <ul>
          <li>
            <a href="">
              <img src="@/assets/img/space/ha1.png" alt="" />
              <p>小米秒杀</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="@/assets/img/space/ha2.png" alt="" />
              <p>企业团购</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="@/assets/img/space/ha3.png" alt="" />
              <p>F码通道</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="@/assets/img/space/ha4.png" alt="" />
              <p>米粉卡</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="@/assets/img/space/ha5.png" alt="" />
              <p>以旧换新</p>
            </a>
          </li>
          <li>
            <a href="">
              <img src="../assets/img/space/ha6.png" alt="" />
              <p>话费充值</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="uisertl">
        <ul>
          <li>
            <a href="">
              <img src="../assets/img/space/h1.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="">
              <img src="../assets/img/space/h2.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="">
              <img src="../assets/img/space/h3.jpg" alt="" />
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Advertising",
  components: {},
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.Advertising {
  width: 1226px;
  margin: 0 auto;
  .chitising {
    margin: 14px 0 14px 0;
    height: 170px;
    display: flex;
    .aiuyert {
      width: 234px;
      //   background: #5f5f5f;
      ul {
        margin: 0;
        width: 234px;
        list-style-type: none;
        font-size: 12px;
        text-align: center;
        // background: #5f5f5f;
        li {
          position: relative;
          float: left;
          width: 78px;
          height: 85px;
          background: #5f5f5f;
          a {
            display: block;
            padding-top: 18px;
            text-overflow: ellipsis;
            color: #fff;
            opacity: 0.7;
            -webkit-transition: opacity 0.2s;
            transition: opacity 0.2s;
            img {
              width: 24px;
              height: 24px;
            }
            p {
              font-size: 14px;
            }
          }
        }
      }
    }
    .uisertl {
      width: 987px;
      ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style-type: none;
        li {
          float: left;
          width: 316px;
          height: 170px;
          margin-left: 15px;
          a {
            display: block;
            height: 170px;
            img {
              display: block;
              width: 316px;
              height: 170px;
            }
          }
        }
      }
    }
  }
}
</style>
